<template>
<div v-if="tabIndex == 0">aaa</div>
<div v-if="tabIndex == 1">bbb</div>
<div v-if="tabIndex == 2">ccc</div>
<div v-if="tabIndex == 3">ddd</div>
<div v-if="tabIndex == 4">fff</div>
<nut-tabbar @tab-switch="tabSwitch"  :bottom="true" :safeAreaInsetBottom="true">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>
</template>

<script>
import { ref } from 'vue'

 export default {
    setup() {
      let tabIndex = ref(0)
      function tabSwitch(item, index) {
        tabIndex.value = index
        console.log(item, index);
      }
      return {
        tabIndex,
        tabSwitch,
      };
    },
  }
  </script>